<template>
  <div class="recommended-products">
    <div class="product">
      <p class="ft-30">{{ componentData[`title${capitalizeLang}`] }}</p>
      <p class="ft-18">{{ componentData[`subTitle${capitalizeLang}`] }}</p>
      <div class="pro-col">
        <div
          v-for="(item, index) in componentData.list"
          :key="index"
          class="pro-item"
          @click="toPage(item)"
        >
          <div class="pro-item-box">
            <img :src="item.coverImage" alt="" />
          </div>
          <p class="ft-bold">{{ item[`title${capitalizeLang}`] }}</p>
          <p class="ft-16">{{ item[`subtitle${capitalizeLang}`] }}</p>
        </div>
      </div>
      <div class="more" @click="toProduct">{{ $t('common.more') }} →</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
  },
  methods: {
    async toPage(item) {
      if (!item.url) {
        return
      }

      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
    toProduct() {
      this.$router.push({
        path: '/product',
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.recommended-products {
  background-color: #fff;
  position: relative;
  overflow: hidden;

  .product {
    .pd(0, 0, 30, 0);
    .ft(24);
    .width(1200);

    margin: 0 auto;

    &::after {
      content: '';
      clear: both;
      display: block;
    }

    .ft-30 {
      .ft(30);

      color: #333;
      font-weight: bold;
    }

    .ft-18 {
      .ft(18);

      color: #888;
      font-weight: 400;
    }

    .pro-col {
      .mg(40, 0, 0, 0);

      display: flex;

      .pro-item {
        .width(280);
        .height(370);
        .pd(15, 0, 0, 0);
        .mg(0, 0, 24, 0);
        .ft(20);
        cursor: pointer;

        & + .pro-item {
          .mg(0, 0, 24, 24);
        }

        background: #f0f0f0;
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        overflow: hidden;

        .ft-bold {
          .mg(20, 0, 0, 0);
        }

        .pro-item-box {
          .width(240);
          .height(240);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        img {
          .maxWidth(240);
          .maxHeight(240);

          transition: 0.3s all linear;

          &:hover {
            transform: scale(1.1);
          }
        }

        .ft-16 {
          .ft(16);

          color: #777;
        }
      }
    }

    .more {
      color: #0762cb;
      float: right;
      cursor: pointer;
      .ft(18);
    }
  }
}
</style>
